@import "../app/base/sass/dev";

@import "../../node_modules/andy-ui/src/stylesheets/sass/dev";
@import "../../node_modules/andy-ui/src/vue-base/sass/dev";

@import "../../node_modules/andy-ui/src/vue-base/sass/query";
@import "../../node_modules/andy-ui/src/vue-base/sass/layout";
@import "../../node_modules/andy-ui/src/vue-base/sass/utilities";

@import "../../node_modules/andy-ui/src/vue-base/sass/color";

@import "../app/vue-base/sass/layout";

@import "../app/base/sass/media";

@include use-full-screen-b-app();

// layout
.b-app {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
    > [b-app-header] {
        height: 54px;
        border-bottom: 1px solid $aui-brand-gray;
    }
    > main {
        height: calc(100% - 55px);
    }
    @include aui-query-media-between("sm") {
        .aui-layout.aui-layout-grid .aui-layout__item[b-app-content] {
            width: 100%;
            height: 100%;
            margin-left: 0;
        }
        [b-app-aside] {
            width: 0;
            height: 100%;
            margin-left: 0;
        }
    }
    .editorarea {
        margin-left: 0 !important;
        position:fixed;
        left: 0;
        bottom: 0;
        height: 210px;
    }
    &--multi {
        $aside-width: 276px;
        @include aui-query-media-between("sm") {
            > main {
                width: calc(100% - #{$aside-width});
            }

            > [b-app-header] {
                width: calc(100% - #{$aside-width});
            }

            [b-app-aside] {
                width: $aside-width - 1;
                height: 100%;
                border-left: 1px solid $aui-brand-gray;
                position: absolute;
                right: 0;
                top: 0;
            }

            .aui-layout.aui-layout-grid .aui-layout__item[b-app-content] {
                width: calc(100% - #{$aside-width});
                height: 100%;
            }

            .editorarea {
                width: calc(100% - #{$aside-width});
            }
        }
    }
}

$b-app-chat-user-list-header-height: 0;
$b-app-chat-user-list-footer-height: 0;
$b-app-chat-user-list-content-height: calc(100% - #{$b-app-chat-user-list-header-height + $b-app-chat-user-list-footer-height});

.b-app-chat-user-list {
    &__header {
        height: $b-app-chat-user-list-header-height;
    }
    &__content {
        height: $b-app-chat-user-list-content-height;
        .clusterize-scroll {
            max-height: 100%;
        }
    }
    &__footer {
        height: $b-app-chat-user-list-footer-height;
    }
}

.b-app-messages {
    overflow: auto;
    height: calc(100% - 210px);
    padding: 10px;
    box-sizing: border-box;

    .b-app-message {
        margin-bottom: 10px;
    }
}

// user card
@import "../ui/media/index";

@include app-create-user-card-media() {
    padding: 5px 10px;
}


// message
@import "../ui/media";

// editor
.aui-editor [editor-textarea] {
    width: 99%;
    height: 10em;
}

.wysiwyg-editor {
    height: 10em;
}


@import "../ui/progress/index";
@include app-create-progress();

// card
@import "./components/card/index";

// button
@import "../ui/button/index";


main > .aui-easy-grid > .aui-layout {
    margin: 0;
    width: 100%;
}

.app-editor {
    height: calc(100% - 60px);
}

.aui-editor {
    height: 100%;
}

.aui-editor .wysiwyg-container {
    height: calc(100% - 30px);
}

.app-editor .wysiwyg-wrapper {
    height: 100%;
}

.aui-editor .wysiwyg-editor {
    height: 100%;
}

.aui-editor p {
    margin: 0;
}

// messages
.app-message-media {
    .aui-file-card {
        background-color: #ffffff;
    }
}